
@import '@/uni.scss';

/* 弹性布局盒模型 */
.flex {
    display: flex;
}

.align-center {
	align-items: center;
}

.flex-direction {
	flex-direction: column;
}

/* 弹性布局盒模型可换行 */
.rowW {
    display: flex;
    flex-wrap: wrap;
}
/* 水平垂直居中 */
.centerXY {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 上下居中 */
.centerY {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
/* 横向排列 */
.rowX {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
/* 横向排列,所有元素放置于底部 */
.bottomY {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
/* 左右居中 */
.centerX {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* 纵向排列 */
.columnY {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* 向左向右 */
.betweenX {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/* 向上向下 */
.betweenY {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.rightX {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* justify-content: flex-end; */
}

.flex-w {
	flex: 1;
}

.bold {
	font-weight: bold;
}

.color-text {
	color: $uni-text-color;
}

.color-primary{
	color: $uni-color-primary;
}

.color-error{
	color: $uni-color-error;
}

.color-warning{
	color: $uni-color-warning;
}

.color-646464{
	color: $uni-text-color-646464;
}

.color-CCCCCC{
	color: $uni-text-color-CCCCCC;
}

.widthB30 {
	width: 30%;
}

.min-widthB30 {
	min-width: 30%;
}

.widthB100 {
	width: 100%;
}

.shrink {
	flex-shrink: 0;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.u-navbar__placeholder{
	background: transparent !important;
}

// 全局 input placeholderClass
.input-style{
	font-size: 28rpx !important;
}

// 全局from 样式修改
.u-form-item__body{
	padding: 15rpx 0 !important;
	box-sizing: border-box;
}

.empty-centent  {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%);
}

.container {
	width: 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.color-black{
	color: #000000;
}

.color-333{
	color: #333333;
}

.color-white {
	color: white;
}

.color-success {
	color: $uni-color-success;
}

.bg-white {
	background-color: white;
}

.page-box{
	background: #F4F6F8;
	position: relative;
	z-index: 1;
	min-height: 100vh;
}

.page-box::after{
	content: '';
	background: linear-gradient(180deg, #ECF5FF 0%, #FFFFFF 100%);
	position: absolute;
	width: 100%;
	height: 480rpx;
	top: 0rpx;
	left: 0rpx;
	background-size: 100% 1480rpx;
	z-index: -1;
}

.button-style{
	color: #FFFFFF;
	background: $uni-color-primary;
	border-radius: 50rpx 50rpx 50rpx 50rpx;
}

.button-error{
	color: #FFFFFF;
	background: linear-gradient( 270deg, #F82828 0%, #FB7E7E 100%);
	border-radius: 50rpx 50rpx 50rpx 50rpx;
}

@for $i from 1 through 10{
	.font-w-#{$i*100}{
		font-weight: #{$i*100} !important;
	}
}

//  margin padding fontSize
@for $i from 1 through 200 {
	
	.radius#{$i} {
		border-radius:#{$i}rpx;
	}
	
	.gap#{$i}{
		gap:#{$i}rpx;
	}
	
	.multi#{$i} {
		display: -webkit-box ;
		white-space: normal;//换行
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: #{$i};
	}
	
	.pad-#{$i}{
		padding: #{$i}rpx;
		box-sizing: border-box;
	}
	
	.pad-top-#{$i}{
		padding-top: #{$i}rpx;
		box-sizing: border-box;
	}
	
	.pad-bottom-#{$i}{
		padding-bottom: #{$i}rpx;
		box-sizing: border-box;
	}
	
    .pad-left-#{$i}{
		padding-left: #{$i}rpx;
		box-sizing: border-box;
	}
	
	.pad-left-right-#{$i}{
		padding-left: #{$i}rpx;
		padding-right: #{$i}rpx;
		box-sizing: border-box;
	}
	
	.pad-top-bottom-#{$i}{
		padding-top: #{$i}rpx;
		padding-bottom: #{$i}rpx;
		box-sizing: border-box;
	}
	
	.pad-right-#{$i}{
		padding-right: #{$i}rpx;
		box-sizing: border-box;
	}
	
	.mar-top-#{$i}{
		margin-top: #{$i}rpx;
	}
	
	.mar-bottom-#{$i}{
		margin-bottom: #{$i}rpx;
	}
	
	.mar-right-#{$i}{
		margin-right: #{$i}rpx;
	}
	
	.mar-#{$i}{
		margin: #{$i}rpx;
	}
	
	.mar-top-bottom-#{$i}{
		margin-top: #{$i}rpx;
		margin-bottom: #{$i}rpx;
		box-sizing: border-box;
	}
	
	.mar-left-right-#{$i}{
		margin-top: #{$i}rpx;
		margin-bottom: #{$i}rpx;
		box-sizing: border-box;
	}
	
	.mar-left-#{$i}{
		margin-left: #{$i}rpx;
	}
	
	.font-#{$i}{
		font-size: #{$i}rpx !important;
	}
}